<template>
  <div>
    <app-header></app-header> 
    <div class="main">
      <div v-for="(list,i) in list" :key="i" v-if="i==index">
        <ul class="nav">
          <li>
            <span class="titleNum">{{list.index}}</span>
            <span class="quesType" v-if="list.type=='单选'">(单选题)</span>
            <span class="quesType" v-if="list.type=='多选'">(多选题)</span>
            <span class="quesType" v-if="list.type=='判断'">(判断题)</span>
            <span class="content">{{list.content}}</span>
          </li>
          <li v-for="(item, ind) in list.options" :key="ind">
            <span class="option" :class="list.yourAnswer.indexOf(item.value)>-1?'active':''">{{item.value}}</span>
            <span class="optionContent">{{item.label}}</span>
          </li>
        </ul>
        <ul class="nav1">
          <li>
            <span class="analysis">参考答案：</span>
            <span>{{list.answer}}</span>
          </li>
          <li>
            <span class="analysis">试题解析：</span>
            <span>{{list.analyse?list.analyse:'暂无解析'}}</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- <radio :options="radio001" value="China"></radio> -->
    <span class="btn" v-if="index!=0" @click="index=index-1">上一题</span>
    <span class="btn" v-if="index<list.length-1" @click="index=index+1">下一题</span>

    <div class="bottom" style="">
      <ul class="nav2">
        <li>
          <em class="bule_icon" @click="show=true"></em>{{index+1}}/{{list.length}}
        </li>

        <li>
          <em class="false_icon"></em>{{errorTotal}}
        </li>
        <li>
          <em class="true_icon"></em>{{rightTotal}}
        </li>
      </ul>
    </div>
    <div v-transfer-dom>
      <popup v-model="show">
        <div class="popup2">
          <div class="bottom2">
            <div>
              <ul class="nav2">
                <li>
                  <em class="bule_icon"></em>{{index+1}}/{{list.length}}
                </li>

                <li>
                  <em class="false_icon"></em>{{errorTotal}}
                </li>
                <li>
                  <em class="true_icon"></em>{{rightTotal}}
                </li>
              </ul>
            </div>
            <div style="clear:both;padding:5px 0">
              <ul class="nav3">
                <li v-for="(i,num) in list.length" :key="num" @click="index=num">
                  <span class="subjectNum" v-bind:class="[index==num? 'redColor':'geenColor']">{{i}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
  import Header from "../../components/header";
  import { getStudentExamAnswerRecord } from '@/api/trainClass';
  import {
    TransferDom,
    Popup,
    Group,
    Cell,
    XButton,
    XSwitch,
    Toast,
    XAddress,
    ChinaAddressData
  } from "vux";
  export default {
    directives: {
      TransferDom
    },
    components: {
      "app-header": Header,
      Popup,
      Group,
      Cell,
      XSwitch,
      Toast,
      XAddress,
      XButton
    },
    data() {
      return {
        index: 0,
        show: false,
        id: '',
        list: [],
        rightTotal: 0,
        errorTotal:0
      };
    },
    created() {
      this.id = this.$route.query.id;
      this.$vux.loading.show({
          text: "Loading"
      });
      getStudentExamAnswerRecord({ examRecordId: this.id }).then(
        response => {
          this.list = response;
          this.rightTotal = response.filter(x => x.status == 1).length;
          this.errorTotal = response.filter(x => x.status == 0).length;
          this.$vux.loading.hide();
        }
      );
    },
    methods: {}
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
  .main {
    padding: 17px 15px 31px 15px;
    text-align: left;
  }

  ul {
    list-style-type: none;
  }
  .nav{
    margin-top: 60px;
  }
  .nav li {
    margin-bottom: 25px;
  }

  .nav1 {
    margin-top: 20px;
    margin-bottom: 20px;
  }

    .nav1 li {
      margin-bottom: 12px;
      font-size: 14px;
      font-weight: bold;
    }

  .titleNum {
    display: inline-block;
    width: 21px;
    height: 21px;
    text-align: center;
    border-radius: 5px;
    background-color: #2269ff;
    color: #ffffff;
    line-height: 21px;
    font-size: 11px;
    font-weight: bold;
  }

  .quesType {
    display: inline-block;
    color: #2269ff;
    padding-left: 5px;
    font-size: 15px;
    vertical-align: middle;
    font-weight: bold;
  }

  .content {
    font-size: 15px;
    vertical-align: middle;
    margin-left: 10px;
    font-weight: bold;
  }

  .option {
    display: inline-block;
    width: 17px;
    height: 17px;
    border-radius: 15px;
    border: solid 1px #979797;
    text-align: center;
    line-height: 17px;
    margin-right: 5px;
    font-weight: bold;
  }

  .optionContent {
    font-size: 14px;
    font-weight: bold;
  }

  .active {
    background-color: #0abd2b;
    color: #ffffff;
    border: none;
  }

  .btn {
    display: inline-block;
    height: 45px;
    font-size: 15px;
    background-color: #2269ff;
    font-weight: bold;
    line-height: 45px;
    width: 120px;
    color: #ffffff;
    text-align: center;
    border-radius: 10px;
    margin-top: 25px;
    margin: 25px 15px 0px 30px;
    margin-bottom: 20px;
  }

  .analysis {
    color: #2269ff;
  }

  .bottom {
    background-color: #eeeeee;
    height: 50px;
    width: 100%;
    position: fixed;
    bottom: 0;
  }

  .bottom2 {
    background-color: #eeeeee;
    height: 50px;
  }

  .nav2 {
    clear: both;
  }

    .nav2 li {
      float: right;
      margin-right: 30px;
      height: 50px;
      line-height: 50px;
      font-size: 14px;
    }

  .true_icon {
    display: inline-block;
    background: url("../../assets/images/true@2x.png") no-repeat center center;
    background-size: 100%;
    width: 20px;
    height: 20px;
    margin-right: 3px;
    vertical-align: middle;
  }

  .bule_icon {
    display: inline-block;
    background: url("../../assets/images/bule@2x.png") no-repeat center center;
    background-size: 100%;
    width: 20px;
    height: 20px;
    margin-right: 3px;
    vertical-align: middle;
  }

  .false_icon {
    display: inline-block;
    background: url("../../assets/images/false@2x.png") no-repeat center center;
    background-size: 100%;
    width: 20px;
    height: 20px;
    margin-right: 3px;
    vertical-align: middle;
  }

  .popup2 {
    padding-bottom: 15px;
    height: 325px;
    background-color: #ffffff;
  }

  .nav3 {
    display: inline;
    text-align: center;
  }

    .nav3 li {
      display: inline-block;
      width: 20%;
      margin-top: 14px;
    }

  .subjectNum {
    display: inline-block;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50px;
    background-color: #eeeeee;
    font-size: 15px;
  }

  .geenColor {
    border: solid 1px #0ebe2e;
  }

  .redColor {
    border: solid 1px #fa4444;
  }
</style>
